<template>
  <view>
    <view class="icon-box" @click="onUpload()">
      <u-avatar class="logo" :src="userInfo.avatar" size="140"></u-avatar>
      <view class="box-title"> 点击修改头像 </view>
    </view>
    <view class="contentView">
      <u-line color="#DFE0E6"></u-line>
      <view class="itemView" @click="onEditName()">
        <view class="itemTitle">用户昵称</view>
        <view class="itemText">{{ userInfo.nickname }}</view>
        <u-icon name="/static/next.png" size="12"></u-icon>
      </view>
      <u-line color="#DFE0E6"></u-line>
      <view class="itemView" @click="routeTo(2)">
        <view class="itemTitle">修改手机</view>
        <view class="itemText">
          {{ userInfo.mobile.substr(0, 3) }} **** {{ userInfo.mobile.substr(8, 3) }}
        </view>
        <u-icon name="/static/next.png" size="12"></u-icon>
      </view>
      <view class="itemView" @click="routeTo(3)">
        <view class="itemTitle">修改密码</view>
        <u-icon name="/static/next.png" size="12"></u-icon>
      </view>
    </view>
    <view class="contentView">
      <view class="itemView" @click="routeTo(5)">
        <view class="itemTitle">实名认证</view>
        <u-icon name="/static/next.png" size="12"></u-icon>
      </view>
      <u-line color="#DFE0E6"></u-line>
      <view class="itemView" @click="onThird()">
        <view class="itemTitle">第三方账号</view>
        <u-icon name="/static/next.png" size="12"></u-icon>
      </view>
      <u-line color="#DFE0E6"></u-line>
      <view class="itemView" @click="onBankCard()">
        <view class="itemTitle">我的银行卡</view>
        <u-icon name="/static/next.png" size="12"></u-icon>
      </view>
      <view class="itemView">
        <view class="itemTitle">个性化内容推荐</view>
        <u-switch v-model="checked" @change="onchange"></u-switch>
      </view>
      <view class="itemView" @click="onRemove">
        <view class="itemTitle">账号注销</view>
        <u-icon name="/static/next.png" size="12"></u-icon>
      </view>
      <!-- <view class="itemView" @click="test">
				<view class="itemTitle">视频</view>
				<u-icon name="/static/next.png" size="12"></u-icon>
			</view> -->
    </view>
    <u-modal
      v-model="editShow"
      title="编辑名称"
      :show-cancel-button="true"
      confirm-color="#0F76BC"
      @confirm="onEditConfirm"
    >
      <view class="slot-content">
        <input class="editInput" placeholder="请输入用户名称" v-model="username" />
      </view>
    </u-modal>

    <view @click="onLogout" class="login-out"> 退出登录 </view>
  </view>
</template>

<script>
import { uploadFiles } from '@/common/upload.js'
// #ifdef APP
import permision from '@/common/permission.js'
// #endif

export default {
  data() {
    return {
      editShow: false,
      userInfo: '',
      username: '',
      checked: true
    }
  },
  onShow() {
    this.userInfo = uni.getStorageSync('userInfo')
    this.checked = uni.getStorageSync('individuation') ? true : false
  },
  methods: {
    onUpload() {
      // #ifdef APP
      uni.getSystemInfo({
        success: (res) => {
          if (res.osName == 'ios') {
            uni.chooseImage({
              count: 1,
              sizeType: ['compressed'],
              sourceType: ['album'],
              success: (res) => {
                uploadFiles(res.tempFilePaths[0]).then((path) => {
                  this.$u
                    .put('/app-api/member/user/update-avatar', { avatar: path.data })
                    .then((res) => {
                      this.userInfo.avatar = path.data
                      this.$u.toast('成功')
                    })
                })
              }
            })
            return
          }
          if (!uni.getStorageSync('albumPer')) {
            uni.dialog.confirm(
              '照片权限说明',
              '设置头像、封面、资料等图片信息需要照片文件访问权限，请您确认授权，否则无法使用该功能。',
              () => {
                this.up()
              }
            )
          } else {
            this.up()
          }
        }
      })
      // #endif

      // #ifndef APP
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album'],
        success: (res) => {
          uploadFiles(res.tempFilePaths[0]).then((path) => {
            this.$u.put('/app-api/member/user/update-avatar', { avatar: path.data }).then((res) => {
              this.userInfo.avatar = path.data
              this.$u.toast('成功')
            })
          })
        }
      })
      // #endif
    },
    up() {
      //const platform = uni.getSystemInfoSync().platform;
      permision.androidPermissionCheck(['android.permission.READ_EXTERNAL_STORAGE']).then((res) => {
        if (res == 1) {
          uni.setStorageSync('albumPer', true)
          uni.chooseImage({
            count: 1,
            sizeType: ['compressed'],
            sourceType: ['album'],
            success: (res) => {
              uploadFiles(res.tempFilePaths[0]).then((path) => {
                this.$u
                  .put('/app-api/member/user/update-avatar', { avatar: path.data })
                  .then((res) => {
                    this.userInfo.avatar = path.data
                    this.$u.toast('成功')
                  })
              })
            }
          })
        } else if (res == 0) {
          uni.setStorageSync('albumPer', true)
          uni.dialog.confirm(
            '照片权限说明',
            '设置头像、封面、资料等图片信息需要照片文件访问权限，请您确认授权，否则无法使用该功能。',
            () => {
              uni.chooseImage({
                count: 1,
                sizeType: ['compressed'],
                sourceType: ['album'],
                success: (res) => {
                  uploadFiles(res.tempFilePaths[0]).then((path) => {
                    this.$u
                      .put('/app-api/member/user/update-avatar', { avatar: path.data })
                      .then((res) => {
                        this.userInfo.avatar = path.data
                        this.$u.toast('成功')
                      })
                  })
                }
              })
            }
          )
        } else {
          uni.dialog.confirm(
            '照片权限说明',
            '您已关闭文件访问权限，设置头像、封面、资料等图片信息需要照片文件访问权限，请您手动开启授权，否则无法使用该功能。',
            () => {}
          )
        }
      })
    },
    upHeadImage(path) {
      let self = this
      self.$u.api
        .setUserInfoChange({
          avatar: path
        })
        .then((res) => {
          self.initData()
        })
    },
    onEditName() {
      this.editShow = true
      this.username = this.userInfo.nickname
    },
    onEditConfirm() {
      let self = this
      self.$u
        .put('/app-api/member/user/update-nickname', {
          nickname: this.username
        })
        .then((res) => {
          this.$u.toast('修改成功')
          let user = uni.getStorageSync('userInfo')
          user.nickname = this.username
          uni.setStorageSync('userInfo', user)
          self.initData()
        })
    },
    onBankCard() {
      uni.navigateTo({
        url: '/other/bank-card-list/bank-card-list'
      })
    },
    routeTo(e) {
      this.$utils.route({
        url: '/other/set-phone-pwd-realname/set-phone-pwd-realname',
        params: {
          status: e
        }
      })
    },
    onThird() {
      this.$utils.route({
        url: '/other/third-party/third-party'
      })
    },
    test() {
      uni.navigateTo({
        url: '/pages/video-list/video-list'
      })
    },
    onchange(e) {
      uni.setStorageSync('individuation', e)
    },
    onLogout() {
      uni.dialog.confirm('温馨提示', '确认退出？', () => {
        this.$u.post('/app-api/member/auth/logout').then((res) => {
          uni.clearStorageSync('userInfo')
          uni.clearStorageSync('tokenInfo')
        })
        this.$u.toast('退出成功')
        setTimeout(() => {
          uni.switchTab({
            url: '/pages/index/index'
          })
        }, 800)
      })
    },
    onRemove() {
      uni.dialog.confirm(
        '温馨提示',
        '账号确认注销？注销后该账号将无法登录，请确保改账号交易已完成、无纠纷，注销后该账号相关日志记录日志平台将保留不少于6个月时间。',
        () => {
          this.$u.delete('/app-api/member/user/cancellation').then((res) => {
            this.$toast('注销成功')
            uni.clearStorageSync()
            uni.reLaunch({
              url: '/universal/login/login'
            })
          })
        }
      )
    }
  }
}
</script>

<style>
@import url('setting.css');

.icon-box {
  background-color: #fff;
  height: 300rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.logo {
  margin-top: 35rpx;
}
.list {
  padding: 20rpx;
}
.box-title {
  font-size: 30rpx;
  margin: 20rpx 0 10rpx 0;
}

.box-vsion {
  color: #999999;
  font-size: 30rpx;
}
.login-out {
  padding: 20 0;
  text-align: center;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 30rpx;
  width: 710rpx;
  background-color: #d6d6d6;
  position: fixed;
  bottom: 20rpx;
  left: 20rpx;
}
page {
  background: #f5f5f5;
}
</style>
